<template>
  <div class="financeWrap">
    <div class="financeInner" :style="{transform: zoom, left: left}">
      <Top></Top>
      <div class="body">
        <div class="left">
          <Chart2 :dataList="dataList1" :type="'income'"></Chart2>
          <Chart1 :dataList="incomeData" :type="'income'"></Chart1>
          <Chart3 :dataList="incomeData"></Chart3>
        </div>
        <div class="center">
          <div class="c1">
            <M1 @requestData="requestData"></M1>
            <M2 :dataList="profitData"></M2>
          </div>
          <div class="c2">
            <div class="c21">
              <M3 :dataList="profitData"></M3>
            </div>
            <div class="c22">
              <M4 :dataList="profitData"></M4>
            </div>
          </div>
          <div class="c3">
            <M5 :dataList="yaerProfitList" @requestData="profit"></M5>
          </div>
        </div>
        <div class="right">
          <Chart2 :dataList="dataList2" :type="'cost'"></Chart2>
          <Chart1 :dataList="costData" :type="'cost'"></Chart1>
          <M6 :dataList="costData"></M6>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Top from '@/views/home/BoardPage/FinanceBoard/Top'
import Chart2 from '@/views/home/BoardPage/FinanceBoard/Chart2'
import Chart1 from '@/views/home/BoardPage/FinanceBoard/Chart1'
import Chart3 from '@/views/home/BoardPage/FinanceBoard/Chart3'
import M1 from '@/views/home/BoardPage/FinanceBoard/M1'
import M2 from '@/views/home/BoardPage/FinanceBoard/M2'
import M3 from '@/views/home/BoardPage/FinanceBoard/M3'
import M4 from '@/views/home/BoardPage/FinanceBoard/M4'
import M5 from '@/views/home/BoardPage/FinanceBoard/M5'
import M6 from '@/views/home/BoardPage/FinanceBoard/M6'
import serve from '@/api/financeBoard'
import cookies from '@/utils/cookies'
// import request from '@/utils/request'
export default {
  components: { Top, Chart2, Chart1, Chart3, M1, M2, M3, M4, M5, M6 },
  data() {
    return {
      currentNav: '',
      data2: ['人工费用', '资金成本', '变动费用', '经营费用', '固定费用'],
      dataList1: [],
      dataList2: [],
      incomeData: { xAxis: [], abs: [], income: [] },
      costData: { xAxis: [], abs: [], income: [] },
      profitData: [],
      yaerProfitList: [],
      zoom: 'scale(1)',
      left: 0,
    }
  },
  async created() {
    let params = { dataTime: this.util.timeFormat3B(new Date().toLocaleDateString()) }
    // await this.requestAjax()
    await this.login()
    await this.icome(params)
    await this.profitAndCost(params)
    await this.cost(params)
    await this.profit(new Date().getFullYear())
  },
  mounted() {
    this.fullScreenDom = document.querySelector('.fullScreenBox')
    console.log(this.fullScreenDom.offsetHeight, window.screen.height)
    this.changeProp()
    window.onresizeArr.push(this.changeProp)
  },
  methods: {
    changeProp() {
      console.log(this.fullScreenDom.offsetHeight, window.screen.height, window.innerWidth)
      // if (this.fullScreenDom.offsetHeight === window.screen.height) {
      //   innerWidth = 1832 *
      // } else {
      //   innerWidth = 1832
      // }
      let timeOut = setTimeout(() => {
        clearTimeout(timeOut)
        let height = document.querySelector('.financeWrap').offsetHeight
        let width = document.querySelector('.financeWrap').offsetWidth
        // console.log(height, width)
        let prop = height / 1080
        this.zoom = 'scale(' + prop + ')'
        if (this.fullScreenDom.offsetHeight === window.screen.height) {
          if (prop === 1) {
            this.left = 0
            return
          }
          let innerWidth = (window.innerWidth - document.querySelector('.financeInner').offsetWidth * prop) / 2
          // console.log(window.innerWidth, document.querySelector('.financeInner').offsetWidth * prop)
          this.left = innerWidth + 'px'
        } else {
          this.left = (width - 1832 * prop) / 2 + 'px'
        }
      }, 100)
    },
    login() {
      return new Promise((result, reject) => {
        serve
          .login({ account: 'admin', password: '123456' })
          .then((data) => {
            cookies.setCookie('token', data.token)
            result()
          })
          .catch(() => {
            reject()
          })
      })
    },
    /* 实际收入与计划收入 */
    icome(params) {
      return new Promise((result, reject) => {
        serve
          .income(params)
          .then((data) => {
            this.dataList1 = data
            let tempData = { xAxis: [], aps: [], income: [] }
            data.forEach((e) => {
              tempData.xAxis.push(e.name)
              tempData.aps.push(e.aps)
              tempData.income.push(e.value)
            })
            this.incomeData = tempData
            console.log(this.incomeData)
            result()
          })
          .catch(() => {
            reject()
          })
      })
    },
    /* 查询收益与盈亏 */
    profitAndCost(params) {
      return new Promise((result, reject) => {
        serve
          .profitAndCost(params)
          .then((data) => {
            /* 统一排序 */
            if (data.length < 3) {
              for (let i = data.length; i < 3; i++) {
                data.push({ dataTime: params.dataTime, 实际收入: 0, 实际盈亏: 0, 实际投入: 0 })
              }
            }
            this.insertSort(data)
            this.profitData = data
            result()
          })
          .catch(() => {
            reject()
          })
      })
    },
    /* 实际投入 */
    cost(params) {
      return new Promise((result, reject) => {
        serve
          .cost(params)
          .then((data) => {
            this.dataList2 = data
            let tempData = { xAxis: [], aps: [], income: [] }
            data.forEach((e) => {
              tempData.xAxis.push(e.name)
              tempData.aps.push(e.aps)
              tempData.income.push(e.value)
            })
            this.costData = tempData
            result()
          })
          .catch(() => {
            reject()
          })
      })
    },
    /* 年度总盈亏 */
    profit(year) {
      console.log(year)
      let params = {
        type: 'month',
        start: year + '-01',
        end: year < new Date().getFullYear() ? year + '-12' : this.util.timeFormat5(new Date().getTime()),
      }
      return new Promise((result, reject) => {
        serve
          .profit(params)
          .then((data) => {
            this.yaerProfitList = data.data
            result()
          })
          .catch(() => {
            reject()
          })
      })
    },
    /* 请求 */
    async requestData(params) {
      await this.icome(params)
      await this.profitAndCost(params)
      await this.cost(params)
    },
    /* 插入排序 */
    insertSort(arr) {
      // for (let i = 1; i < arr.length; i++) {
      //   let temp = arr[i]
      //   let j = i - 1
      //   while (new Date(arr[j].dataTime).getTime() > new Date(temp.dataTime).getTime()) {
      //     arr[j + 1] = arr[j]
      //     j--
      //   }
      //   arr[j + 1] = temp
      // }
      for (let i = 0; i < arr.length - 1; i++) {
        for (let w = 0; w < arr.length - 1 - i; w++) {
          if (new Date(arr[w].dataTime).getTime() > new Date(arr[w + 1].dataTime).getTime()) {
            let temp = arr[w]
            arr[w] = arr[w + 1]
            arr[w + 1] = temp
          }
        }
      }
      return arr
    },
  },
}
</script>

<style scoped lang='less'>
.financeWrap {
  overflow: hidden;
  font-size: 12px;
  background-color: #000051;
  height: 100%;
  width: 100%;
  .financeInner {
    position: relative;
    margin: 0 auto;
    width: 1832px;
    height: 1080px;
    transform-origin: 0 0;
  }
}

.body {
  height: calc(100% - 83px);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  .left {
    background-image: url(../../../../assets/chartBg/FinanceBoard5.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    height: 961px;
    width: 456px;
  }

  .center {
    width: 800px;
    .c1 {
    }

    .c2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .c21 {
      }

      .c22 {
      }
    }
    .c3 {
      margin-top: 20px;
    }
  }

  .right {
    background-image: url(../../../../assets/chartBg/FinanceBoard5.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    height: 961px;
    width: 456px;
  }
}
</style>
